<template>
  <div class="demo-title">picker/demo1</div>
  <div class="demo">
    <div class="sscd-demo-row" @click="single.show()">单选</div>
    <div class="sscd-demo-row" @click="multiple.show()">多选</div>
  </div>
  <!-- 单选 -->
  <Picker v-model:visible="single.visible" v-model="single.value" :columns="single.columns" @confirm="single.onConfirm" />
  <!-- 多选 -->
  <Picker v-model:visible="multiple.visible" v-model="multiple.value" :columns="multiple.columns" @confirm="multiple.onConfirm" />
</template>

<script lang="ts" setup>
  import { reactive } from 'vue'
  import Picker from '@sscd-mobile/picker'
  //单选
  const single = reactive({
    visible: false,
    show: () => single.visible = true,
    value: ['WenChang'],
    columns: [
      { text: '海口市', value: 'HaiKou' },
      { text: '三亚市', value: 'SanYa' },
      { text: '三沙市', value: 'SanSha' },
      { text: '儋州市', value: 'DanZhou' },
      { text: '五指山市', value: 'WuZhiShan' },
      { text: '文昌市', value: 'WenChang' },
      { text: '琼海市', value: 'QiongHai' },
      { text: '万宁市', value: 'WanNing' },
      { text: '东方市', value: 'DongFang' },
      { text: '定安县', value: 'DingAn' },
      { text: '屯昌县', value: 'TunChang' },
      { text: '澄迈县', value: 'ChengMai' },
      { text: '临高县', value: 'LinGao' },
      { text: '白沙黎族自治县', value: 'BaiSha' },
      { text: '昌江黎族自治县', value: 'ChangJiang' },
      { text: '乐东黎族自治县', value: 'LeDong' },
      { text: '陵水黎族自治县', value: 'LingShui' },
      { text: '保亭黎族苗族自治县', value: 'BaoTing' },
      { text: '琼中黎族苗族自治县', value: 'QiongZhong' }
    ],
    onConfirm: (res) => console.log('onConfirm-single: ', res)
  })
  //多选
  const multiple = reactive({
    visible: false,
    show: () => multiple.visible = true,
    value: ['Wednesday', 'Afternoon'],
    columns: [
      [
        { text: '周一', value: 'Monday' },
        { text: '周二', value: 'Tuesday' },
        { text: '周三', value: 'Wednesday' },
        { text: '周四', value: 'Thursday' },
        { text: '周五', value: 'Friday' }
      ],
      [
        { text: '上午', value: 'Morning' },
        { text: '下午', value: 'Afternoon' },
        { text: '晚上', value: 'Evening' }
      ]
    ],
    onConfirm: (res) => console.log('onConfirm-multiple: ', res)
  })
</script>

<style scoped></style>
